<!--
 * @Description: 菜单
 * @Author: chaizhou
 * @Date: 2023-02-21 10:03:31
 * @LastEditTime: 2023-03-01 17:26:49
-->
<template>
  <el-menu class="menuWrap" :collapse="isCollapse" :default-active="router.currentRoute.value?.path">
    <!-- 后续待补充收起展开 -->
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>-->
    <!-- logo -->
    <div class="logo"></div>
    <template v-for="item in props.data" :key="item.name">
      <!-- 有子菜单 -->
      <el-sub-menu :index="item.path" v-if="item?.children?.length">
        <template #title>
          <el-icon>
            <Setting />
          </el-icon>
          <template v-if="!isCollapse">{{ item.name }}</template>
        </template>
        <!-- 渲染子菜单 -->
        <template #default>
          <el-menu-item v-for="ceil in item.children" :key="ceil.name" :index="ceil.link">
            <el-icon>
              <Setting />
            </el-icon>
            <template #title>{{ ceil.name }}</template>
          </el-menu-item>
        </template>
      </el-sub-menu>
      <!-- 无子菜单 -->
      <el-menu-item :index="item.link" v-else>
        <el-icon>
          <Setting />
        </el-icon>
        <template #title>{{ item.name }}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import { Setting } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 是否展开
const isCollapse = ref(false)
const props = defineProps({
  data: Array
})

// 渲染图标
// const renderIcon = (icon) => {
//   if (!icon) {
//     return null;
//   }
//   const IconComp = <Setting />;
//   return (
//     <el-icon>
//       <IconComp />
//     </el-icon>
//   );
// };

// 渲染菜单dom
// const renderMenu = (list) => {
//   return list?.map((item) => {
//     const { path, name, icon, link, children } = item;
//     if (!item?.children?.length) {
//       return (
//         <el-menu-item index={path} route={link}>
//           {renderIcon(icon)}
//           <span>{name}</span>
//         </el-menu-item>
//       );
//     }
//     const slots = {
//       title: () => (
//         <>
//           {renderIcon(icon)}
//           <span>{name}</span>
//         </>
//       ),
//       default: () => renderMenu(children),
//     };
//     return <el-sub-menu index={path} v-slots={slots} />;
//   });
// };
</script>

<style lang="less" scoped>
.menuWrap {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  border-radius: 0 16px 0 0;
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #001772;
    top: 58px;
    left: 0;
    position: absolute;
  }
  .el-menu--collapse {
    width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2) !important;
  }
  .logo {
    height: 32px;
    border-radius: 4px 16px 16px 4px;
    background-color: #fff;
    margin: 12px 16px;
    padding-left: 16px;
    background: url('../assets/images/logo.png') no-repeat #fff;
    background-size: 144px 16px;
    background-position: center;
  }
}
</style>
